<template>
  <div id="jobProvided">
    <div class="container">
      <div class="input-group">
        <label for="companyName">公司名称:</label>
        <input type="text" id="companyName" v-model="newCompany" />
      </div>
      <div class="input-group">
        <label for="jobTitle">岗位名称:</label>
        <input type="text" id="jobTitle" v-model="newJob" />
      </div>
      <button class="add-button" @click="addNewJob">增加岗位</button>
    </div>

    <a-table :columns="columns" :data="dataList" style="margin-top: 20px">
      <template #optional="{ record }">
        <a-button type="primary" @click="handleDelete(record)">删除</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const dataList = ref([
      {
        id: "1",
        companyName: "济南亚信",
        job: "JAVA后端工程师",
      },
      {
        id: "2",
        companyName: "字节跳动",
        job: "前端",
      },
      {
        id: "3",
        companyName: "京东",
        job: "销售",
      },
      {
        id: "4",
        companyName: "阿里巴巴",
        job: "测试工程师",
      },
      {
        id: "5",
        companyName: "美团",
        job: "算法工程师",
      },
    ]);

    const newCompany = ref("");
    const newJob = ref("");

    const columns = [
      {
        title: "序号",
        dataIndex: "id",
      },
      {
        title: "企业名称",
        dataIndex: "companyName",
      },
      {
        title: "岗位",
        dataIndex: "job",
      },
      {
        title: "操作",
        slotName: "optional",
      },
    ];

    const handleDelete = (record) => {
      const index = dataList.value.findIndex((item) => item.id === record.id);
      if (index !== -1) {
        dataList.value.splice(index, 1);
      }
    };

    const addNewJob = () => {
      const newId = (dataList.value.length + 1).toString();
      dataList.value.push({
        id: newId,
        companyName: newCompany.value,
        job: newJob.value,
      });
      newCompany.value = "";
      newJob.value = "";
    };

    return {
      newCompany,
      newJob,
      dataList,
      columns,
      handleDelete,
      addNewJob,
    };
  },
};
</script>

<style scoped>
#jobProvided {
  /* 可以添加一些样式进行自定义 */
}

.container {
  display: flex;
  align-items: center; /* 让内容垂直居中 */
}

.input-group {
  margin-right: 10px; /* 设置输入框组的右边距 */
}

.add-button {
  margin-left: 10px; /* 设置按钮左边距 */
}
</style>
